<template>
    <!-- 内容布局 -->
  <div class="common-layout">
    <el-container>
      <el-header>
        <!-- 头部搜索 -->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="searchForm.username" placeholder="填入姓名" clearable />
    </el-form-item>
    <el-form-item label="账户">
      <el-input v-model="searchForm.account" placeholder="填入账户" clearable />
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="searchForm.phoneNumber" placeholder="填入手机号" clearable />
    </el-form-item>
    <el-form-item label="角色">
      <el-select placeholder="选择"  v-model="searchForm.role" clearable >
        <el-option label="管理员" value="0" />
        <el-option label="客户" value="1" />
        <el-option label="商家" value="2" />
      </el-select>
    </el-form-item>
    
    <el-form-item label="起始时间">
      <el-date-picker
        v-model="searchForm.createdTime"
        type="date"
        placeholder="选择起始时间"
        clearable
      />-
      <el-date-picker
        v-model="searchForm.endTime"
        type="date"
        placeholder="选择结束时间"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="delAll">删除所选</el-button>
    </el-form-item>
  </el-form>
      </el-header>
      <el-main>
        <!-- 信息表 -->
        <el-table :data="tableData" style="width: 100%"
        @selection-change="selectChange"
        >
        <el-table-column>
            <el-table-column type="selection" width="55" :selectable="selectable" />
        </el-table-column>
    <el-table-column label="Id" prop="userId" />
    <el-table-column label="姓名" prop="username" />
    <el-table-column label="账户" prop="account" />
    <el-table-column label="电话" prop="phoneNumber" />
    <el-table-column label="余额" prop="balance" />
    <el-table-column label="角色" prop="role" />
    <el-table-column label="创建时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer/></el-icon>
          <span style="margin-left: 10px">{{ scope.row.createdTime }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
<!-- 分页 -->
<el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5,10,15,20]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </el-main>
    </el-container>
  </div>
<!-- 修改用户信息 -->
<el-drawer
    v-model="dialog"
    title="更改用户数据"
    direction="rtl"
    class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <el-form :model="editform">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="editform.username" autocomplete="off" />
        </el-form-item>
       <el-form-item label="账户" :label-width="formLabelWidth">
            <el-input v-model="editform.account" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="editform.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="editform.phoneNumber" autocomplete="off" />
        </el-form-item>
        <el-form-item label="余额" :label-width="formLabelWidth">
            <el-input v-model="editform.balance" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
            <el-select
            v-model="editform.role"
            placeholder="选择"
          >
            <el-option label="管理员" value="0" />
            <el-option label="用户" value="1" />
            <el-option label="商家" value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">Cancel</el-button>
        <el-button type="primary" :loading="loading" @click="onClick">
          {{ loading ? 'Submitting ...' : 'Submit' }}
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import {ref, onMounted,reactive} from "vue"
import { Timer, User } from '@element-plus/icons-vue'
import { type ComponentSize, ElDrawer, ElMessageBox,ElNotification } from 'element-plus'
import api from '../../api/index'
import 'element-plus/dist/index.css'
// 搜索对象
const searchForm = ref({
  username: null,
  account: null,
  phoneNumber: null,
  role:null,
  createdTime:null,
  endTime:null
})
// 提交搜索
const search = () => {
    initData()
}
// 表格展示数据
interface User {
  userId:number
  username: string
  account: string
  password:string
  phoneNumber: string
  balance:number
  avatar:string
  role:number
  createdTime:Date
}
// 操作修改
const handleEdit = (index: number, row: User) => {
    dialog.value=true
    editform.value.userId=row.userId
    editform.value.account=row.account
    editform.value.balance=row.balance
    editform.value.password=row.password
    editform.value.avatar=row.avatar
    editform.value.phoneNumber=row.phoneNumber
    editform.value.role=row.role
    editform.value.username=row.username

}
// 操作删除
const handleDelete = (index: number, row: User) => {
  api.postReq('/user/del?id='+row.userId).then(res=>{
    let result=res.data
    alert(result.msg)
    initData()
  })
}
// 用户数据
const tableData = ref(
    []
)
// 选择的id
const ids=ref<Number[]>()
const selectable = (row: User) => ![1, 31].includes(row.userId)
const selectChange=(val:User[])=>{
ids.value=val.map(x=>x.userId)
}
const delAll=()=>{
    if(confirm("是否删除？")){
        api.postReq('/user/delAll',ids.value).then(res=>{
            let result=res.data
            alert(result.msg)
            initData()
        })
    }
}

// 分页所需数据
const currentPage = ref(1)
const pageSize = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const total=ref(0)

// 分页操作
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  initData()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  initData()
}

// 挂载时接收所有用户信息
onMounted(()=>{
    initData()
})
const initData=()=>{
    api.postReq('/user/showAll?pageNum='+currentPage.value+'&pageSize='+pageSize.value,searchForm.value).then(res=>{
        let result=res.data
        tableData.value=result.data.list
        currentPage.value=result.data.pageNum
        pageSize.value=result.data.pageSize
        total.value=result.data.total  
    })
}

// 修改所需
const dialog = ref(false)
const editform =ref<User>({
    userId:1,
    username: '',
    account:'',
    password:'',
    phoneNumber: '',
    balance:1,
    avatar:'',
    role:0,
    createdTime:new Date
})
const formLabelWidth = '80px'
const loading = ref(false)
let timer: number | undefined
const edit=()=>{
    api.postReq('/user/update',editform.value).then(res=>{
        let result=res.data
        if(result.code==1){
            ElNotification({
            title: 'Success',
            message: result.msg,
            type: 'success',
            })
            initData()
        }else{
            ElNotification({
            title: 'Error',
            message: result.msg,
            type: 'error',
            })
        }
    })
}


const onClick = () => {
  loading.value = true
  edit()
  setTimeout(() => {
    loading.value = false
    dialog.value = false
  }, 400)
}
const cancelForm = () => {
  loading.value = false
  dialog.value = false
  clearTimeout(timer)
}
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
